<template>
  <div class="components-wrap">
    <div class="list">
      <div
        v-for="item in list"
        :key="item.id"
        class="item"
        hover-class="hover"
        hover-start-time="0"
        hover-stay-time="0"
        @click="handleGoToDetail(item)"
      >
        <div class="left">
          <div class="icon">
            <div class="icon-center">{{ item.time.date }}</div>
            <div class="icon-bottom">{{ item.time.day }}</div>
          </div>
          <div class="text">
            <div class="title">
              {{ item.title }}
            </div>
            <div class="msg">
              <div class="msg-item">
                时间: {{ item.showTime }}
              </div>
              <div class="msg-item">
                地址: {{ item.address }}
              </div>
            </div>
          </div>
        </div>
        <div class="right" @click.stop="handleFinish(item)">
          <i v-if="item.status" class="finish-icon iconfont iconyes" :class="{ finish: item.status }"></i>
          <i v-else class="finish-icon iconfont icongou" :class="{ finish: item.status }"></i>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { generateImgUrl, formatDate } from '@/utils'
import dealAddress from '@/utils/dealAddress'
import api from '@/api'

export default {
  props: {
    list: {
      type: Array,
      required: true,
    },
    isShowSign: {
      type: Boolean,
      default: false,
    },
    isEnd: {
      type: Boolean,
      default: false,
    },
  },
  data () {
    return {
      generateImgUrl,
      dealAddress,
      formatDate,
      notifyConfig: {
        type: 'success',
        message: '',
      },
    }
  },
  methods: {
    handleGoToDetail (item) {
      uni.navigateTo({
        url: `/pages/todoDetail/index?id=${item.id}`,
      })
    },
    async handleFinish (item) {
      this.$emit('showModel', {
        title: !item.status ? '你确定该待办已完成吗？' : '你确定取消完成该待办吗？',
        ok: async () => {
          if (item.status) {
            await api.todoCancel({ id: item.id })
            this.$emit('showTips', {
              title: '你已取消完成一条待办!',
            })
          } else {
            await api.todoComplete({ id: item.id })
            this.$emit('showTips', {
              title: '你已完成一条待办!',
            })
          }
          this.$emit('change', {
            id: item.id,
            status: !item.status,
          })
        },
      })
    },
  },
}
</script>

<style lang="scss" scoped>
@import "~css/var.scss";

.components-wrap {
	.list {
		.item {
			display: flex;
			overflow: hidden;
			align-items: center;
			height: 70px;
			margin: 10px 36rpx;
			border-bottom: 1px solid #fbf9f9;
			border-radius: 6px;
			box-shadow: 1px 1px 2px 0 rgba(0, 0, 0, .1);
			background: #fff;

			&.hover {
				background: #f8f8f8;
			}

			.left {
				@include omit;
				display: flex;
				align-items: center;
				flex: 0 0 610rpx;

				.icon {
					display: flex;
					flex-direction: column;
					justify-content: center;
					align-items: center;
					flex: 0 0 136rpx;
					height: 70px;
					padding: 3px;
					border-radius: 5px;
					color: #fff;
					background: #e51e1e;

					.icon-top {
						line-height: 1;
						font-size: $fz-xs;
					}

					.icon-center {
						line-height: 1;
						font-weight: 800;
						font-size: 33px;
						color: rgba(255, 255, 255, 1);
					}

					.icon-bottom {
						margin-top: 3px;
						line-height: 1;
						font-weight: 500;
						font-size: 12px;
					}
				}

				.text {
					margin-left: 15px;

					.title {
						width: 430rpx;
						font-weight: 400;
						font-size: 16px;
						@include omit;
					}

					.msg {
						font-size: 12px;
						color: rgba(0, 0, 0, .6);

						.msg-item {
							width: 430rpx;
							@include omit;
						}
					}
				}
			}

			.right {
				position: relative;
				flex: 1;

				.finish-icon {
					font-size: 20px;
					color: #c4c4c4;

					&.finish {
						color: #e51e1e;
					}
				}
			}
		}
	}
}
</style>
